import React, { Component } from 'react';
import '../styles/SearchPage.css'
import * as service from '../api/index';
import Item from 'antd-mobile/es/components/dropdown/item';
import { DeleteOutline } from 'antd-mobile-icons';

class SearchPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hotlist:[]
        }
    }
    back() {
        this.props.history.go(-1);
    }
    componentDidMount() {
        service.hotSearch().then((res) => {
            console.log(res.data.list);
            this.setState({
                hotlist:res.data.list
            })
        })
    }

    toAllGood(item) {
        //跳路由 到所有商品页,并且携带三级分类id
        this.props.history.push({ pathname: '/index/allgoods', state: { searchkey:item } })
        console.log(item);
    }

    render() {
        return (
            <div className='search'>
                <div className='search-box'>
                    <input type="text" placeholder='搜索店铺内商品' />
                    <div onClick={()=>{this.back()}}>取消</div>
                </div>
                <div className='recent-search'>
                    <div className='recent-search-name'>
                        最近搜索
                        <span><DeleteOutline /></span>
                    </div>
                    <div className='search-label'>
                        <span>香薰</span><span>护肤</span>
                    </div>
                </div>
                <div className='recent-search'>
                    <div className='recent-search-name'>热门搜索</div>
                    <div className='search-label'>
                        {
                            this.state.hotlist.map((item, index) => {
                                return (
                                    <span key={index} onClick={()=>{this.toAllGood(item)}}>
                                        {item}
                                    </span>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default SearchPage;